<template>
  <!-- 列表 -->
  <ContentWrap>
    <div style="height: 50px">
      <el-button v-hasPermi="['orderReport:orderCostProject:save']" type="primary" :loading="exportLoading" @click="saveData">
        保存
      </el-button>
      <el-button v-hasPermi="['orderReport:orderCostProject:submit']" type="primary" @click="submitData"> 提交 </el-button>
      <el-button type="primary" @click="goBack"> 关闭 </el-button>
    </div>
    <el-table ref="multipleTableRef" border :height="tableHeight" :data="list" row-key="id">
      <el-table-column label="序号" align="center" type="index" fixed="left" width="80" />
      <el-table-column
        label="产品编号"
        header-align="left"
        align="left"
        prop="productNumber"
        min-width="200px"
      />
      <el-table-column
        label="客户代码"
        header-align="left"
        align="left"
        prop="customerCode"
        min-width="200px"
      />
      <el-table-column
        label="客户名称"
        header-align="left"
        align="left"
        prop="customerName"
        min-width="200px"
      />
      <el-table-column
        label="业务员"
        header-align="left"
        align="left"
        prop="salesperson"
        min-width="200px"
      />
      <el-table-column
        label="产品名称"
        header-align="left"
        align="left"
        prop="productName"
        min-width="200px"
      />
      <el-table-column
        label="产品规格"
        header-align="left"
        align="left"
        prop="productStandard"
        min-width="200px"
      />
      <el-table-column
        label="创建时间"
        header-align="left"
        align="left"
        prop="createTime"
        min-width="200px"
      />
      <el-table-column label="订单类型" header-align="left" align="left" min-width="200px">
        <template #default="scope">
          <dict-tag :type="'market_order_type'" :value="scope.row.dictOrderType" />
        </template>
      </el-table-column>
      <el-table-column label="制造成本预估（不含税）" align="center" width="220">
        <el-table-column align="right" width="180" :class="'custom-header'">
          <template #header>
            <span>主材</span>
          </template>
          <template #default="scope">
            <el-input
              v-model="scope.row.principalMaterial"
              class="!w-140px"
              type="number"
              v-bind:only-number="true"
              :disabled="type"
            />
          </template>
        </el-table-column>
        <el-table-column align="right" width="180" :class="'custom-header'">
          <template #header>
            <span>辅材</span>
          </template>
          <template #default="scope">
            <el-input
              v-model="scope.row.auxiliaryMaterial"
              class="!w-140px"
              type="number"
              v-bind:only-number="true"
            />
          </template>
        </el-table-column>
        <el-table-column align="right" width="180" :class="'custom-header'">
          <template #header>
            <span>外协</span>
          </template>
          <template #default="scope">
            <el-input
              v-model="scope.row.outsourcing"
              class="!w-140px"
              type="number"
              v-bind:only-number="true"
            />
          </template>
        </el-table-column>
        <el-table-column align="right" width="180" :class="'custom-header'">
          <template #header>
            <span>运费</span>
          </template>
          <template #default="scope">
            <el-input
              v-model="scope.row.freight"
              class="!w-140px"
              type="number"
              v-bind:only-number="true"
            />
          </template>
        </el-table-column>
        <el-table-column align="right" width="180" :class="'custom-header'">
          <template #header>
            <span>电气</span>
          </template>
          <template #default="scope">
            <el-input
              v-model="scope.row.electric"
              class="!w-140px"
              type="number"
              v-bind:only-number="true"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="合计"
          header-align="right"
          align="left"
          prop="totalPrice"
          min-width="200px"
        />
      </el-table-column>
      <el-table-column label="状态" header-align="left" align="left" min-width="200px">
        <template #default="scope">
          <dict-tag :type="'dict_cost_status'" :value="scope.row.dictCostStatus" />
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        header-align="left"
        align="left"
        prop="remark"
        min-width="200px"
      />
    </el-table>
  </ContentWrap>
</template>

<script setup lang="ts" name="OrderCost">
  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化
  const type = ref(false)
  const multipleTableRef = ref()
  const list = ref([]) // 列表的数据
  const exportLoading = ref(false) // 导出的加载中
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import * as OrderCostProjectApi from '@/api/reportQuery/orderReport/orderCostProject'
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const { push } = useRouter()
  /** 初始化 **/
  /** 初始化 **/
  const { query } = useRoute() // 路由的查询
  const tableHeight = ref(0)
  /**保存 */
  const saveData = async () => {
    list.value.forEach((item) => {
      item.submitFlag = 1
    })
    await OrderCostProjectApi.updateOrderCost(list.value)
    message.success(t('common.createSuccess'))
    tagsViewStore.delView(routes.currentRoute.value)
    goBack()
  }
  /**提交 */
  const submitData = async () => {
    list.value.forEach((item) => {
      item.submitFlag = 2
    })
    await OrderCostProjectApi.updateOrderCost(list.value)
    message.success(t('common.createSuccess'))
    tagsViewStore.delView(routes.currentRoute.value)
    goBack()
  }
  const goBack = () => {
    push('/reportQuery/reportQuery/orderReport/orderCostProject')
  }
  onMounted(async () => {
    tableHeight.value = document.body.clientHeight - 132 - 127
    list.value = JSON.parse(query.data).data
    if(JSON.parse(query.data).type == 'view') {
      type.value = true
    }else {
      type.value = false
    }
  })
</script>
